<template>
  <div class="warp">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <div>
          <span>登录</span>
        </div>
      </template>
      <el-form
        :model="form"
        ref="ruleFormRef"
        :rules="rules"
        label-width="80px"
        :inline="false"
      >
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button>注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter ,useRoute, type RouteLocationRaw} from "vue-router";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "Login",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import {useUserStore } from "@/stores/user"
const router = useRouter()
const route = useRoute()
const path = route.query.target
const store = useUserStore()

// Form 数据
const form = ref({
  email: "2901758658@qq.com",
  password: "111111",
});

// Form 表单实例
const ruleFormRef = ref();
const A = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

const validateEmail = (rule: any, value: any, callback: any) => {
  if (!A.test(value)) {
    callback(new Error("格式不正确"));
  } else {
    callback();
  }
};
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("密码不能为空"));
  } else {
    callback();
  }
};

const rules = ref({
  email: [{ validator: validateEmail, trigger: "blur" }],
  password: [{ validator: validatePass, trigger: "blur" }],
});

const onSubmit = async () => {
  try {
    await ruleFormRef.value.validate();
    await  store.getLogin(form.value)
    router.push(path as RouteLocationRaw || '/')
    ElMessage.success("登录成功")
  } catch (e: any) {
      console.log(e);
  }
};

</script>
<style lang="scss" scoped>
.warp {
  width: 100%;
  height: 100%;
  background: url("./img/login.jpeg") 0 0 no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-card {
    width: 500px;
    background-color: rgba($color: #fff, $alpha: 0.5);
  }
}
</style>
